<template>
    <div class="menu-page">
        <ul>
            <li v-for="(item, index) in menus" :key="index" @click="skip(item.path)">{{ item.name }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'IndexPage',
    data() {
        return {
            menus: [
                {
                    name: '可拖动的正方体',
                    path: '/dragTheCube'
                },
                {
                    name: '在线编辑',
                    path: '/editExcelOnline'
                },
                {
                    name: '动态组件',
                    path: '/dynamicComponent'
                },
                {
                    name: '异步组件',
                    path: '/asynchronousComponent'
                },
                {
                    name: '旋转方向盘',
                    path: '/steeringWheel'
                },
                {
                    name: 'PDF加水印',
                    path: '/pdfWatermarking'
                },
                {
                    name: 'threejs加载gltf',
                    path: '/threejsLoadsGltf'
                },
                {
                    name: '网格布局',
                    path: '/gridLayout'
                },
                {
                    name: '网格布局2',
                    path: '/gridLayout2'
                },
                {
                    name: '瀑布流',
                    path: '/waterfallFlow'
                },
                {
                    name: 'canvas圆环动画',
                    path: '/canvasRound'
                },
                {
                    name: 'canvas表盘',
                    path: '/canvasDial'
                },
                {
                    name: 'svg动画',
                    path: '/svgAnimation'
                },
                {
                    name: '字体特效',
                    path: '/fontEffect'
                },
                {
                    name: 'filter使用',
                    path: '/filterUsage'
                },
                {
                    name: '下雪',
                    path: '/snowEffect'
                },
                {
                    name: 'css特效',
                    path: '/accordion'
                },
                {
                    name: 'html转PDF',
                    path: '/htmlToPDF'
                },
                {
                    name: 'pdfmake',
                    path: '/pdfmakeTable'
                },
                {
                    name: '折线图',
                    path: '/lineChart'
                }
            ]
        };
    },
    methods: {
        skip(path) {
            this.$router.push(path);
        }
    }
};
</script>

<style scoped></style>
